<template>
    <div>
        <van-tabbar v-model="active" @change="Onchange">
            <van-tabbar-item icon="home-o" to="/home">Home</van-tabbar-item>
            <van-tabbar-item icon="medel-o" to="train">Train</van-tabbar-item>
            <van-tabbar-item class="tabbar-share" icon="add-o" to="share">Share</van-tabbar-item>
            <van-tabbar-item icon="friends-o" to="club">Club</van-tabbar-item>
            <van-tabbar-item icon="user-o" to="me">Me</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
  name: 'bottom-bar',
  // props: {
  //     active: String|Number
  // }
  // ,
  data () {
    return {
      active: 0
    }
  },
  methods: {
    Onchange (index) {
    //   console.log('this.active :', this.active)
    }
  }
}
</script>

<style scoped>
.tabbar-share{
    transform: scale(1.2);
    margin-top: -2px;
    border-radius: 50%;
}
</style>
